<template>
  <div class="pageList">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="isEnd"
        finished-text="没有更多了"
        @load="getListData "
        v-if="!flag"
      >
        <van-cell
          v-for="list in lists"
          :key="`list-${list.id}`"
        >
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <VueCateList
              :id="list.id"
              :image="list.image"
              :title="list.title"
              :type="list.type"
              :saleNum="list.saleNum"
              :price="list.price"
              :couponValue="list.couponValue"
            >
            </VueCateList>
          </template>
        </van-cell>
      </van-list>
      <van-list
        v-model="loading"
        :finished="isEnd"
        finished-text="没有更多了"
        @load="getColumn "
        v-else
      >
        <van-cell
          v-for="list in lists"
          :key="`list-${list.id}`"
        >
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <VueCateList
              :id="list.id"
              :image="list.image"
              :title="list.title"
              :type="list.type"
              :saleNum="list.saleNum"
              :price="list.price"
              :couponValue="list.couponValue"
            >
            </VueCateList>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import VueCateList from '@/components/VueCateList'
export default {
  data () {
    return {
      id: '',
      name: '',
      lists: [],
      loading: false,
      isEnd: false,
      refreshing: false,
      start: 0,
      flag: ''
    }
  },
  components: {
    VueCateList
  },
  created () {
    const url = this.$route.query.url
    console.log(url)
    if (url.indexOf('column') >= 0) {
      this.id = this.$route.query.url.slice(20)
      this.name = 'column'
      this.flag = true
      // this.getListData()
    } else {
      this.id = this.$route.query.url.slice(35)
      this.name = 'category'
      this.flag = false
      // this.getColumn()
    }
    // console.log(this.id)
    // this.getListData()
  },
  methods: {
    getListData () {
      this.$http.getListPage(this.name, this.id, this.start)
        .then(resp => {
          console.log(resp)
          // 下拉刷新
          if (this.refreshing) {
            this.lists = []
            this.refreshing = false
          }
          const { list, isEnd, nextIndex } = resp.items
          this.lists = this.lists.concat(list)
          this.isEnd = isEnd
          this.start = nextIndex
          this.loading = false
        })
    },
    getColumn () {
      this.$http.getListPage(this.name, this.id, this.start)
        .then(resp => {
          console.log(resp)
          // 下拉刷新
          if (this.refreshing) {
            this.lists = []
            this.refreshing = false
          }
          this.lists = this.lists.concat(resp.list)
          this.isEnd = resp.isEnd
          this.start = resp.nextIndex
          this.loading = false
        })
    },
    onRefresh () {
      // 清空列表数据
      this.isEnd = false
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.getListData()
    }
  }
}
</script>

<style lang="scss" scoped>
.pageList {
  background: #eeeeee;
  .van-list {
    display: flex;
    flex-wrap: wrap;
    .van-cell {
      width: 46%;
      margin: 2%;
      padding: 2%;
      background-color: white;
      box-sizing: border-box;
    }
  }
  .van-cell__title {
    width: 100%;
  }
}
</style>
